<template>
  <div>
    <div class="item-box" v-for="(item,index) in List" :key="index">
      <div class="name">{{ item.name }}</div>
      <div class="img-box" v-if="item.url">
        <img class="show-img" :src="item.url" fit="contain" @click="imgPreview(item.url)" />
        <img class="delete-img" src="../../assets/images/delete-icon.png" alt="" @click="deleteImg(index)">
      </div>
      <div class="upload-box" @click="Upload(index)" v-else>
        <van-uploader 
          ref="uploader"
          action="/upload"
          accept="image/*"
          :after-read="handleImageUpload"
          multiple :max-count="1" />
      </div>
    </div>
  </div>
</template>
<script>
import { ImagePreview } from 'vant'
export default {
  data() {
    return {
      List: [
        { xh: 0, name: '这是第1个', url: "" },
        { xh: 1, name: '这是第2个', url: "" },
        { xh: 2, name: '这是第3个', url: "" },
      ],
      fileList: [],
      activeIndex: 0,
    }
  },
  methods: {
    Upload(index) {
      this.activeIndex = index
    },
    handleImageUpload(file) {
      this.List.forEach(el => {
        if(el.xh == this.activeIndex) el.url = file.content
      })
    },
    // 图片预览
    imgPreview(imgUrl) {
      ImagePreview([imgUrl]);
    },
    // 删除图片
    deleteImg(index) {
      this.List.forEach((el,i) => {
        if(index == i) el.url = ""
      })
    },
  }
}
</script>
<style lang="less" scoped>
.item-box { display: flex; justify-content: space-between; align-items: center; margin: 5px 0;
  .img-box { width: 80px; height: 80px; position: relative;
    .show-img { width: 100%; height: 100%; }
    .delete-img { position: absolute; top: 0; right: 0; width: 17px; height: 17px; }
  }
  .upload-box { width: 80px; height: 80px; }
}
</style>